<template>
	<view class="container">
		<scroll-view scroll-y class="scroll-view">
			<view class="card-container">
				<uni-card 
					v-for="notice in notices"
					:key="notice.id"
					:title="notice.title"
					:extra="notice.publishTime"
					@click="handleNoticeClick(notice)"
					margin="20rpx"
					:is-shadow="true">

					<view class="content-preview">
						{{ notice.content | ellipsis(50) }}
					</view>
					
					<template v-slot:footer>
						<view class="footer-container">
							<text class="time-text">{{ notice.publishTime }}</text>
							<uni-icons type="arrowright" size="18" color="#666" />
						</view>
					</template>
				</uni-card>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { request } from '@/util/request'
export default {
	data() {
		return {
			notices: []
		}
	},
	filters: {
		ellipsis(value, length) {
			return value.length > length ? value.substring(0, length) + '...' : value
		}
	},
	methods: {
		async queryAll() {
			const resp = await request({
				url: 'owner-server/notice/queryAll',
				method: 'GET'
			});
			if (resp.code === 200) {
				this.notices = resp.data
			}
		},
		async handleNoticeClick(notice) {
			await request({
				url: 'owner-server/notice/readNotice',
				method: 'GET',
				data: {
					noticeId: notice.id
				}
			});
		}
	},
	onLoad() {
		this.queryAll()
	}
}
</script>

<style scoped lang="scss">
.container {
	padding: 20rpx;
	background-color: #f5f5f5;

	.card-container {
		padding: 0 20rpx;

		.uni-card {
			border-radius: 16rpx;
			box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.08);

			.uni-card__header {
				padding: 24rpx 28rpx 0;

				.uni-card__header-title-text {
					font-size: 32rpx;
					font-weight: 500;
					color: #333;
				}

				.uni-card__header-extra {
					font-size: 24rpx;
					color: #999;
				}
			}

			.uni-card__content {
				padding: 20rpx 28rpx;
			}
		}

		.content-preview {
			font-size: 28rpx;
			color: #666;
			line-height: 1.6;
		}

		.footer-container {
			padding: 20rpx 28rpx;
			border-top: 1rpx solid #eee;

			.time-text {
				font-size: 24rpx;
				color: #999;
			}
		}
	}
}
</style>
